<template>
    <div class="medical-document">
        <div class="table-type">
            <div class="table-type-item" :class="{ 'table-type-item--active': activeTableType === 0 }" @click="activeTableType = 0">预警列表</div>
            <div class="table-type-item" :class="{ 'table-type-item--active': activeTableType === 1 }" @click="activeTableType = 1">处置列表</div>
        </div>
        <div class="table">
            <el-table :data="tableData" border fit style="width: 100%" header-cell-class-name="table-header-cell"
            :class="tableData.length === 0 ? 'table-empty' : ''">
                <el-table-column v-for="item in tableConfig" :key="item.prop" :prop="item.prop" :label="item.label">
                </el-table-column>
                <template v-if="operationLabel==='查看'">
                    <el-table-column :label="operationLabel" width="300">
                        <template slot-scope="scope">
                            <div class="operation">
                                <div  >查看</div>
                                <div class="handle">处置</div>
                            </div>
                        </template>
                    </el-table-column>
                </template>
                <template v-else-if="operationLabel==='调查情况'">
                    <el-table-column :label="operationLabel" width="300">
                        <template slot-scope="scope">
                            <div class="operation">
                                <div  >查看</div>
                            </div>
                        </template>
                    </el-table-column>
                </template>

            </el-table>
        </div>
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
    </div>
</template>
<script>

export default {
    name: 'MedicalDocument',
    data() {
        return {
            activeTableType: 0,
            tableConfig: [],
            tableData: [
                {
                    hospital: '板桥医院',
                    code: '1101',
                    name: '计划生育预警',
                    source: '处方数据',
                    whiteList: '开/关',
                },
                {
                    order: '02',
                    code: '1101',
                    name: '计划生育预警',
                    source: '处方数据',
                    whiteList: '开/关',
                },
            ]
        }
    },
    computed: {
        pageType() {
            if(this.$route.query.activeTab==='0') {
                if(this.activeTableType===0) {
                    return '00'
                }
                if(this.activeTableType===1) {
                    return '01'
                }
            }
            if(this.$route.query.activeTab==='1') {
                if(this.activeTableType===0) {
                    return '10'
                }
                if(this.activeTableType===1) {
                    return '11'
                }
            }
            return '00'
        },
        operationLabel() {
            if(this.activeTableType === 0) {
                return '查看'
            }else{
                return '调查情况'
            }
        }
    },
    watch: {
        '$route.query': {
            immediate: true,
            deep: true,
            handler() {
                if(this.pageType === '00'){
                this.tableConfig = [
                    {
                        prop: 'hospital',
                        label: '医院名称',
                    },
                    {
                        prop: 'code',
                        label: '注册号',
                    },
                    {
                        prop: 'dispireDate',
                        label: '许可证到期时间',
                    },
                    {
                        prop: 'region',
                        label: '辖区',
                    },
                    {
                        prop: 'preWarningDate',
                        label: '预警日期',
                    },
                ]
            }else if(this.pageType === '01') {
                this.tableConfig = [
                    {
                        prop: 'id',
                        label: '处置编号',
                    },
                    {
                        prop: 'hospital',
                        label: '医疗机构',
                    },
                    {
                        prop: 'region',
                        label: '辖区',
                    },
                    {
                        prop: 'person',
                        label: '处置人',
                    },
                    {
                        prop: 'count',
                        label: '处置条数',
                    },
                    {
                        prop: 'date',
                        label: '处置时间',
                    },
                ]
            }else if(this.pageType === '10') {
                this.tableConfig = [
                    {
                        prop: 'hospital',
                        label: '医院名称',
                    },
                    {
                        prop: 'code',
                        label: '登记号',
                    },
                    {
                        prop: 'nextCheckDate',
                        label: '下一校验日期',
                    },
                    {
                        prop: 'region',
                        label: '辖区',
                    },
                    {
                        prop: 'orgCode',
                        label: '机构识别代码',
                    },
                    {
                        prop: 'preWarningDate',
                        label: '预警日期',
                    },
                ]
            }else if(this.pageType === '11') {
                this.tableConfig = [
                    {
                        prop: 'hospital',
                        label: '医院名称',
                    },
                    {
                        prop: 'code',
                        label: '登记号',
                    },
                    {
                        prop: 'nextCheckDate',
                        label: '下一校验日期',
                    },
                    {
                        prop: 'region',
                        label: '辖区',
                    },
                    {
                        prop: 'orgCode',
                        label: '机构识别代码',
                    },
                    {
                        prop: 'preWarningDate',
                        label: '预警日期',
                    },
                ]
            }else {
                return []
            }
            }
        }
    }
}
</script>
<style scoped lang="scss">
.medical-document {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.table-type {
    display: flex;
    align-items: center;
    margin-top: 18px;
    padding-bottom: 13px;

    &-item {
        font-weight: 500;
        font-size: 26px;
        color: #4B4B4B;
        height: 25px;
        line-height: 25px;
        margin-right: 26px;
        cursor: pointer;

        &--active {
            font-weight: bold;
            position: relative;

            &::after {
                position: absolute;
                content: "";
                width: 47px;
                height: 5px;
                bottom: -13px;
                left: 50%;
                transform: translateX(-50%);
                background: #4373F1;
                border-radius: 3px;
            }
        }
    }
}
.table {
    flex: 1;
    background-color: #fff;
    margin: 13px 0 16px;

    ::v-deep .table-header-cell {
        background-color: #EBEFF8;
        padding-left: 21px;
        font-weight: 500;
        font-size: 16px;
        color: #414141;
    }

    .el-table {
        height: 100%;
    }

    ::v-deep .el-table__cell {
        padding-left: 21px;
        font-weight: 500;
        font-size: 16px;
        color: #414141;
    }

    :v-deep .el-table__body-wrapper {
        height: 100%;
    }

    :v-deep .el-table__empty-block {
        height: 100%;
    }

    .operation {
        display: flex;
        align-items: center;
        height: 100%;

        .view {
            cursor: pointer;
            font-weight: 500;
            font-size: 16px;
            color: #414141;
            height: 16px;
            line-height: 16px;
            background-repeat: no-repeat;
            background-position: 0 center;
            margin-right: 20px;
            user-select: none;
        }

        .handle {
            margin-left: 77px;
            user-select: none;
            cursor: pointer;
            text-align: center;
            line-height: 32px;
            width: 78px;
            height: 32px;
            background: #4373F1;
            border-radius: 5px;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
        }
    }
}
</style>
